1. septembra 2025Slovenčina

Naučte sa eliminovať React Suspense waterfalls. Sprievodca paralelným načítavaním, Render-as-You-Fetch a ďalšími optimalizáciami pre rýchlejšie aplikácie.

React Suspense Waterfall: Hĺbkový pohľad na optimalizáciu sekvenčného načítavania dát

V neúnavnej snahe o bezproblémový používateľský zážitok bojujú frontend vývojári neustále s impozantným nepriateľom: latenciou. Pre používateľov po celom svete sa počíta každá milisekunda. Pomaly sa načítavajúca aplikácia nielen frustruje používateľov; môže priamo ovplyvniť angažovanosť, konverzie a finančné výsledky spoločnosti. React so svojou komponentovou architektúrou a ekosystémom poskytol silné nástroje na tvorbu komplexných používateľských rozhraní a jednou z jeho najviac transformačných funkcií je React Suspense.

Suspense ponúka deklaratívny spôsob spracovania asynchrónnych operácií, ktorý nám umožňuje špecifikovať stavy načítavania priamo v strome komponentov. Zjednodušuje kód pre načítavanie dát, rozdeľovanie kódu (code splitting) a ďalšie asynchrónne úlohy. S touto silou však prichádza aj nový súbor výkonnostných úvah. Bežnou a často nenápadnou výkonnostnou pascou, ktorá môže nastať, je „Suspense Waterfall“ – reťazec sekvenčných operácií načítavania dát, ktorý môže ochromiť čas načítania vašej aplikácie.

Tento komplexný sprievodca je určený pre globálne publikum React vývojárov. Rozoberieme fenomén Suspense waterfall, preskúmame, ako ho identifikovať, a poskytneme podrobnú analýzu účinných stratégií na jeho elimináciu. Na konci budete vybavení na transformáciu vašej aplikácie z postupnosti pomalých, závislých požiadaviek na vysoko optimalizovaný, paralelizovaný stroj na načítavanie dát, ktorý poskytne vynikajúci zážitok používateľom na celom svete.

Pochopenie React Suspense: Rýchle zhrnutie

Predtým, ako sa ponoríme do problému, si stručne pripomeňme základný koncept React Suspense. V jeho srdci Suspense umožňuje vašim komponentom „čakať“ na niečo, kým sa môžu vykresliť, bez toho, aby ste museli písať zložitú podmienenú logiku (napr. `if (isLoading) { ... }`).

Keď sa komponent v hranici Suspense pozastaví (vyhodením promise), React ho zachytí a zobrazí špecifikované `fallback` UI. Akonáhle sa promise vyrieši, React komponent znovu vykreslí s dátami.

Jednoduchý príklad s načítavaním dát môže vyzerať takto:

// api.js - Pomôcka na zabalenie nášho fetch volania
const cache = new Map();
export function fetchData(url) {
if (!cache.has(url)) {
cache.set(url, getData(url));
}
return cache.get(url);
}
async function getData(url) {
const res = await fetch(url);
if (res.ok) {
return res.json();
} else {
throw new Error('Failed to fetch');
}
}

A tu je komponent, ktorý používa hook kompatibilný so Suspense:

// useData.js - Hook, ktorý vyhadzuje promise
import { fetchData } from './api';
function useData(url) {
const data = fetchData(url);
if (data instanceof Promise) {
throw data; // Toto spúšťa Suspense
}
return data;
}

Nakoniec, strom komponentov:

// MyComponent.js
import React, { Suspense } from 'react';
import { useData } from './useData';
function UserProfile() {
const user = useData('/api/user/123');
return <h1>Welcome, {user.name}</h1>;
}
function App() {
return (
<Suspense fallback={<h2>Loading user profile...</h2>}>
<UserProfile />
</Suspense>
);
}

Toto funguje krásne pre jednu dátovú závislosť. Problém nastáva, keď máme viacero vnorených dátových závislostí.

Čo je to „Waterfall“? Odhalenie výkonnostného úzkeho hrdla

V kontexte webového vývoja sa waterfall (vodopád) vzťahuje na sekvenciu sieťových požiadaviek, ktoré sa musia vykonať v poradí, jedna za druhou. Každá požiadavka v reťazci môže začať až po úspešnom dokončení predchádzajúcej. To vytvára reťazec závislostí, ktorý môže výrazne spomaliť čas načítania vašej aplikácie.

Predstavte si, že si v reštaurácii objednávate trojchodové menu. Waterfall prístup by bol objednať si predjedlo, počkať, kým ho prinesú a zjesť ho, potom si objednať hlavný chod, počkať naň a zjesť ho, a až potom si objednať dezert. Celkový čas, ktorý strávite čakaním, je súčtom všetkých jednotlivých časov čakania. Oveľa efektívnejší prístup by bol objednať si všetky tri chody naraz. Kuchyňa ich potom môže pripravovať paralelne, čo drasticky zníži váš celkový čas čakania.

React Suspense Waterfall je aplikácia tohto neefektívneho, sekvenčného vzoru na načítavanie dát v strome React komponentov. Zvyčajne sa vyskytuje, keď rodičovský komponent načíta dáta a potom vykreslí dieťa, ktoré následne načíta vlastné dáta s použitím hodnoty od rodiča.

Klasický príklad waterfallu

Rozšírme náš predchádzajúci príklad. Máme `ProfilePage`, ktorá načíta údaje o používateľovi. Akonáhle má údaje o používateľovi, vykreslí komponent `UserPosts`, ktorý potom použije ID používateľa na načítanie jeho príspevkov.

// Predtým: Jasná štruktúra waterfallu
function ProfilePage({ userId }) {
// 1. Prvá sieťová požiadavka začína tu
const user = useUserData(userId); // Komponent sa tu pozastaví (suspenduje)
return (
<div>
<h1>{user.name}</h1>
<p>{user.bio}</p>
<Suspense fallback={<h3>Loading posts...</h3>}>
// Tento komponent sa ani nepripojí, kým nie je `user` k dispozícii
<UserPosts userId={user.id} />
</Suspense>
</div>
);
}
function UserPosts({ userId }) {
// 2. Druhá sieťová požiadavka začína tu, AŽ po dokončení prvej
const posts = useUserPosts(userId); // Komponent sa opäť pozastaví
return (
<ul>
{posts.map(post => (<li key={post.id}>{post.title}</li>))}
</ul>
);
}

Postupnosť udalostí je:

`ProfilePage` sa vykreslí a zavolá `useUserData(userId)`.
Aplikácia sa pozastaví (suspenduje) a zobrazí fallback UI. Sieťová požiadavka na dáta používateľa je na ceste.
Požiadavka na dáta používateľa sa dokončí. React znovu vykreslí `ProfilePage`.
Teraz, keď sú dáta `user` k dispozícii, `UserPosts` sa vykreslí prvýkrát.
`UserPosts` zavolá `useUserPosts(userId)`.
Aplikácia sa opäť pozastaví a zobrazí vnútorný fallback „Loading posts...“. Začne sa sieťová požiadavka na príspevky.
Požiadavka na dáta príspevkov sa dokončí. React znovu vykreslí `UserPosts` s dátami.

Celkový čas načítania je `Čas(načítanie používateľa) + Čas(načítanie príspevkov)`. Ak každá požiadavka trvá 500ms, používateľ čaká celú sekundu. Toto je klasický waterfall a je to výkonnostný problém, ktorý musíme vyriešiť.

Identifikácia Suspense waterfalls vo vašej aplikácii

Predtým, ako môžete problém opraviť, musíte ho nájsť. Našťastie, moderné prehliadače a vývojárske nástroje umožňujú pomerne jednoducho odhaliť waterfalls.

1. Použitie vývojárskych nástrojov prehliadača

Karta Network vo vývojárskych nástrojoch vášho prehliadača je váš najlepší priateľ. Tu je, čo hľadať:

Schodiskový vzor: Keď načítate stránku, ktorá má waterfall, uvidíte v časovej osi sieťových požiadaviek zreteľný schodiskový alebo diagonálny vzor. Čas začiatku jednej požiadavky sa bude takmer dokonale zhodovať s časom ukončenia predchádzajúcej.
Analýza časovania: Preskúmajte stĺpec „Waterfall“ na karte Network. Môžete vidieť rozpis časovania každej požiadavky (čakanie, sťahovanie obsahu). Sekvenčný reťazec bude vizuálne zrejmý. Ak je „čas začiatku“ požiadavky B väčší ako „čas ukončenia“ požiadavky A, pravdepodobne máte waterfall.

2. Použitie React Developer Tools

Rozšírenie React Developer Tools je nepostrádateľné pre ladenie React aplikácií.

Profiler: Použite Profiler na zaznamenanie výkonnostnej stopy životného cyklu vykresľovania vášho komponentu. V scenári waterfallu uvidíte, ako sa rodičovský komponent vykreslí, vyrieši svoje dáta a potom spustí opätovné vykreslenie, čo následne spôsobí, že sa detský komponent pripojí a pozastaví. Táto postupnosť vykresľovania a pozastavovania je silným indikátorom.
Karta Components: Novšie verzie React DevTools ukazujú, ktoré komponenty sú aktuálne pozastavené. Sledovanie, ako sa rodičovský komponent od-pozastaví, nasledované okamžitým pozastavením detského komponentu, vám môže pomôcť určiť zdroj waterfallu.

3. Statická analýza kódu

Niekedy môžete potenciálne waterfalls identifikovať už len čítaním kódu. Hľadajte tieto vzory:

Vnorené dátové závislosti: Komponent, ktorý načíta dáta a výsledok tohto načítania odovzdá ako prop detskému komponentu, ktorý potom použije tento prop na načítanie ďalších dát. Toto je najbežnejší vzor.
Sekvenčné hooky: Jeden komponent, ktorý používa dáta z jedného vlastného hooku na načítanie dát na uskutočnenie volania v druhom hooku. Hoci to nie je striktne waterfall rodič-dieťa, vytvára to rovnaké sekvenčné úzke hrdlo v rámci jedného komponentu.

Stratégie na optimalizáciu a elimináciu waterfalls

Keď ste waterfall identifikovali, je čas ho opraviť. Základným princípom všetkých optimalizačných stratégií je prechod od sekvenčného načítavania k paralelnému načítavaniu. Chceme iniciovať všetky potrebné sieťové požiadavky čo najskôr a všetky naraz.

Stratégia 1: Paralelné načítavanie dát s `Promise.all`

Toto je najpriamejší prístup. Ak viete vopred všetky dáta, ktoré potrebujete, môžete iniciovať všetky požiadavky súčasne a počkať na dokončenie všetkých z nich.

Koncept: Namiesto vnorenia načítavaní ich spustite v spoločnom rodičovi alebo na vyššej úrovni vo vašej aplikačnej logike, zabaľte ich do `Promise.all` a potom odovzdajte dáta komponentom, ktoré ich potrebujú.

Prerobme náš príklad `ProfilePage`. Môžeme vytvoriť nový komponent, `ProfilePageData`, ktorý načíta všetko paralelne.

// api.js (upravené na export fetch funkcií)
export async function fetchUser(userId) { ... }
export async function fetchPostsForUser(userId) { ... }

// Predtým: Waterfall
function ProfilePage({ userId }) {
const user = useUserData(userId); // Požiadavka 1
return <UserPosts userId={user.id} />; // Požiadavka 2 začína po dokončení Požiadavky 1
}

// Potom: Paralelné načítavanie
// Pomôcka na vytváranie zdrojov (resource)
function createProfileData(userId) {
const userPromise = fetchUser(userId);
const postsPromise = fetchPostsForUser(userId);
return {
user: wrapPromise(userPromise),
posts: wrapPromise(postsPromise),
};
}
// `wrapPromise` je pomocná funkcia, ktorá umožňuje komponentu čítať výsledok promise.
// Ak je promise nevybavený (pending), vyhodí promise.
// Ak je promise splnený (resolved), vráti hodnotu.
// Ak je promise zamietnutý (rejected), vyhodí chybu.
const resource = createProfileData('123');
function ProfilePage() {
const user = resource.user.read(); // Číta alebo sa pozastaví (suspenduje)
return (
<div>
<h1>{user.name}</h1>
<Suspense fallback={<h3>Loading posts...</h3>}>
<UserPosts />
</Suspense>
</div>
);
}
function UserPosts() {
const posts = resource.posts.read(); // Číta alebo sa pozastaví (suspenduje)
return <ul>...</ul>;
}

V tomto prepracovanom vzore sa `createProfileData` volá raz. Okamžite spustí obe požiadavky na načítanie používateľa aj príspevkov. Celkový čas načítania je teraz určený najpomalšou z dvoch požiadaviek, nie ich súčtom. Ak obe trvajú 500ms, celkové čakanie je teraz ~500ms namiesto 1000ms. To je obrovské zlepšenie.

Stratégia 2: Presunutie načítavania dát do spoločného predka

Táto stratégia je variáciou prvej. Je obzvlášť užitočná, keď máte súrodenecké komponenty, ktoré nezávisle načítavajú dáta, čo môže medzi nimi spôsobiť waterfall, ak sa vykresľujú sekvenčne.

Koncept: Identifikujte spoločný rodičovský komponent pre všetky komponenty, ktoré potrebujú dáta. Presuňte logiku načítavania dát do tohto rodiča. Rodič potom môže vykonať načítania paralelne a odovzdať dáta ako props. Tým sa centralizuje logika načítavania dát a zabezpečí sa, že sa spustí čo najskôr.

// Predtým: Súrodenci načítavajú nezávisle
function Dashboard() {
return (
<div>
<Suspense fallback={...}><UserInfo /></Suspense>
<Suspense fallback={...}><Notifications /></Suspense>
</div>
);
}
// UserInfo načíta dáta o používateľovi, Notifications načíta dáta notifikácií.
// React ich *môže* vykresliť sekvenčne, čo spôsobí malý waterfall.

// Potom: Rodič načíta všetky dáta paralelne
const dashboardResource = createDashboardResource();
function Dashboard() {
// Tento komponent nenačítava dáta, iba koordinuje vykresľovanie.
return (
<div>
<Suspense fallback={...}>
<UserInfo resource={dashboardResource} />
<Notifications resource={dashboardResource} />
</Suspense>
</div>
);
}
function UserInfo({ resource }) {
const user = resource.user.read();
return <div>Welcome, {user.name}</div>;
}
function Notifications({ resource }) {
const notifications = resource.notifications.read();
return <div>You have {notifications.length} new notifications.</div>;
}

Presunutím logiky načítavania zaručujeme paralelné vykonanie a poskytujeme jednotný, konzistentný zážitok z načítavania pre celý dashboard.

Stratégia 3: Použitie knižnice na načítavanie dát s cache

Manuálne orchestraovanie promises funguje, ale v rozsiahlych aplikáciách sa môže stať ťažkopádnym. Tu excelujú špecializované knižnice na načítavanie dát ako React Query (teraz TanStack Query), SWR alebo Relay. Tieto knižnice sú špeciálne navrhnuté na riešenie problémov, ako sú waterfalls.

Koncept: Tieto knižnice udržiavajú globálnu alebo provider-level cache. Keď komponent požiada o dáta, knižnica najprv skontroluje cache. Ak viacero komponentov požiada o tie isté dáta súčasne, knižnica je dostatočne inteligentná na to, aby požiadavku deduplikovala a odoslala iba jednu skutočnú sieťovú požiadavku.

Ako to pomáha:

Deduplikácia požiadaviek: Ak by `ProfilePage` aj `UserPosts` požiadali o tie isté dáta používateľa (napr. `useQuery(['user', userId])`), knižnica by sieťovú požiadavku odoslala iba raz.
Caching: Ak sú dáta už v cache z predchádzajúcej požiadavky, nasledujúce požiadavky môžu byť vyriešené okamžite, čím sa preruší akýkoľvek potenciálny waterfall.
Paralelné v predvolenom nastavení: Prístup založený na hookoch vás nabáda volať `useQuery` na najvyššej úrovni vašich komponentov. Keď React vykresľuje, spustí všetky tieto hooky takmer súčasne, čo vedie k paralelnému načítavaniu v predvolenom nastavení.

// Príklad s React Query
function ProfilePage({ userId }) {
// Tento hook spustí svoju požiadavku okamžite pri vykreslení
const { data: user } = useQuery(['user', userId], () => fetchUser(userId), { suspense: true });
return (
<div>
<h1>{user.name}</h1>
<Suspense fallback={<h3>Loading posts...</h3>}>
// Aj keď je toto vnorené, React Query často efektívne prednačítava alebo paralelizuje načítavania
<UserPosts userId={user.id} />
</Suspense>
</div>
);
}
function UserPosts({ userId }) {
const { data: posts } = useQuery(['posts', userId], () => fetchPostsForUser(userId), { suspense: true });
return <ul>...</ul>;
}

Hoci štruktúra kódu môže stále pripomínať waterfall, knižnice ako React Query sú často dostatočne inteligentné na to, aby ho zmiernili. Pre ešte lepší výkon môžete použiť ich API na prednačítanie (pre-fetching), aby ste explicitne začali načítavať dáta ešte predtým, ako sa komponent vôbec začne vykresľovať.

Stratégia 4: Vzor Render-as-You-Fetch

Toto je najpokročilejší a najvýkonnejší vzor, ktorý silne presadzuje tím Reactu. Obracia bežné modely načítavania dát naruby.

Fetch-on-Render (Problém): Vykresliť komponent -> useEffect/hook spustí načítanie. (Vedie k waterfalls).
Fetch-then-Render: Spustiť načítanie -> počkať -> vykresliť komponent s dátami. (Lepšie, ale stále môže blokovať vykresľovanie).
Render-as-You-Fetch (Riešenie): Spustiť načítanie -> okamžite začať vykresľovať komponent. Komponent sa pozastaví, ak dáta ešte nie sú pripravené.

Koncept: Úplne oddeliť načítavanie dát od životného cyklu komponentu. Sieťovú požiadavku iniciujete v čo najskoršom možnom okamihu – napríklad v smerovacej vrstve alebo v obsluhe udalosti (ako kliknutie na odkaz) – predtým, ako sa komponent, ktorý dáta potrebuje, vôbec začne vykresľovať.

// 1. Začnite načítavať v routeri alebo obsluhe udalosti
import { createProfileData } from './api';
// Keď používateľ klikne na odkaz na profilovú stránku:
function onProfileLinkClick(userId) {
const resource = createProfileData(userId);
navigateTo(`/profile/${userId}`, { state: { resource } });
}

// 2. Komponent stránky prijme zdroj (resource)
function ProfilePage() {
// Získajte zdroj, ktorý už bol spustený
const resource = useLocation().state.resource;
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
<ProfilePosts resource={resource} />
</Suspense>
);
}

// 3. Detské komponenty čítajú zo zdroja
function ProfileDetails({ resource }) {
const user = resource.user.read(); // Číta alebo sa pozastaví (suspenduje)
return <h1>{user.name}</h1>;
}
function ProfilePosts({ resource }) {
const posts = resource.posts.read(); // Číta alebo sa pozastaví (suspenduje)
return <ul>...</ul>;
}

Krása tohto vzoru spočíva v jeho efektivite. Sieťové požiadavky na dáta používateľa a príspevkov sa začnú v okamihu, keď používateľ signalizuje svoj úmysel navigovať. Čas potrebný na načítanie JavaScriptového balíka pre `ProfilePage` a na to, aby React začal vykresľovať, sa deje paralelne s načítavaním dát. Tým sa eliminuje takmer všetok čas čakania, ktorému sa dá predísť.

Porovnanie optimalizačných stratégií: Ktorú si vybrať?

Výber správnej stratégie závisí od zložitosti a výkonnostných cieľov vašej aplikácie.

Paralelné načítavanie (`Promise.all` / manuálna orchestrácia):
- Výhody: Nie sú potrebné externé knižnice. Koncepčne jednoduché pre kolokované dátové požiadavky. Plná kontrola nad procesom.
- Nevýhody: Môže byť zložité spravovať stav, chyby a caching manuálne. Neškáluje sa dobre bez pevnej štruktúry.
- Najlepšie pre: Jednoduché prípady použitia, malé aplikácie alebo výkonnostne kritické sekcie, kde sa chcete vyhnúť réžii knižníc.
Presunutie načítavania dát:
- Výhody: Dobré na organizovanie toku dát v stromoch komponentov. Centralizuje logiku načítavania pre konkrétny pohľad.
- Nevýhody: Môže viesť k „prop drillingu“ alebo vyžadovať riešenie na správu stavu na odovzdávanie dát. Rodičovský komponent sa môže stať preplneným.
- Najlepšie pre: Keď viacero súrodeneckých komponentov zdieľa závislosť na dátach, ktoré je možné načítať z ich spoločného rodiča.
Knižnice na načítavanie dát (React Query, SWR):
- Výhody: Najrobustnejšie a pre vývojárov najprívetivejšie riešenie. Zvláda caching, deduplikáciu, obnovovanie na pozadí a chybové stavy bez ďalšieho nastavovania. Drasticky znižuje boilerplate kód.
- Nevýhody: Pridáva závislosť na knižnici do vášho projektu. Vyžaduje naučenie sa špecifického API knižnice.
- Najlepšie pre: Drvivú väčšinu moderných React aplikácií. Toto by mala byť predvolená voľba pre akýkoľvek projekt s netriviálnymi dátovými požiadavkami.
Render-as-You-Fetch:
- Výhody: Najvýkonnejší vzor. Maximalizuje paralelizmus prekrývaním načítavania kódu komponentu a načítavania dát.
- Nevýhody: Vyžaduje výraznú zmenu v myslení. Môže zahŕňať viac boilerplate kódu na nastavenie, ak nepoužívate framework ako Relay alebo Next.js, ktorý má tento vzor zabudovaný.
- Najlepšie pre: Aplikácie kritické na latenciu, kde záleží na každej milisekunde. Frameworky, ktoré integrujú smerovanie s načítavaním dát, sú ideálnym prostredím pre tento vzor.

Globálne aspekty a osvedčené postupy

Pri tvorbe pre globálne publikum nie je eliminácia waterfalls len príjemným bonusom – je nevyhnutná.

Latencia nie je rovnomerná: 200ms waterfall môže byť pre používateľa blízko vášho servera sotva badateľný, ale pre používateľa na inom kontinente s mobilným internetom s vysokou latenciou môže ten istý waterfall pridať sekundy k času načítania. Paralelizácia požiadaviek je najefektívnejší spôsob, ako zmierniť dopad vysokej latencie.
Waterfalls pri rozdeľovaní kódu (Code Splitting): Waterfalls sa neobmedzujú len na dáta. Bežným vzorom je načítanie balíka komponentu pomocou `React.lazy()`, ktorý si potom načíta vlastné dáta. Toto je waterfall kód -> dáta. Vzor Render-as-You-Fetch pomáha toto riešiť prednačítaním komponentu aj jeho dát pri navigácii používateľa.
Elegantné spracovanie chýb: Keď načítavate dáta paralelne, musíte zvážiť čiastočné zlyhania. Čo sa stane, ak sa dáta používateľa načítajú, ale príspevky zlyhajú? Vaše UI by malo byť schopné toto elegantne zvládnuť, napríklad zobrazením profilu používateľa s chybovou správou v sekcii príspevkov. Knižnice ako React Query poskytujú jasné vzory pre spracovanie chybových stavov pre jednotlivé požiadavky.
Zmysluplné fallbacky: Použite `fallback` prop `` na poskytnutie dobrého používateľského zážitku počas načítavania dát. Namiesto všeobecného spinnera použite skeleton loadery, ktoré napodobňujú tvar finálneho UI. To zlepšuje vnímaný výkon a aplikácia pôsobí rýchlejšie, aj keď je sieť pomalá.

Záver

React Suspense waterfall je nenápadné, ale významné výkonnostné úzke hrdlo, ktoré môže zhoršiť používateľský zážitok, najmä pre globálnu používateľskú základňu. Vzniká z prirodzeného, ale neefektívneho vzoru sekvenčného, vnoreného načítavania dát. Kľúčom k riešeniu tohto problému je mentálny posun: prestaňte načítavať pri vykresľovaní a začnite načítavať čo najskôr a paralelne.

Preskúmali sme radu účinných stratégií, od manuálnej orchestrácie promises až po vysoko efektívny vzor Render-as-You-Fetch. Pre väčšinu moderných aplikácií poskytuje prijatie špecializovanej knižnice na načítavanie dát, ako je TanStack Query alebo SWR, najlepšiu rovnováhu medzi výkonom, vývojárskym zážitkom a silnými funkciami ako caching a deduplikácia.

Začnite auditovať sieťovú kartu vašej aplikácie ešte dnes. Hľadajte tie prezrádzajúce schodiskové vzory. Identifikáciou a elimináciou waterfalls pri načítavaní dát môžete svojim používateľom poskytnúť výrazne rýchlejšiu, plynulejšiu a odolnejšiu aplikáciu – bez ohľadu na to, kde na svete sa nachádzajú.